<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="{{asset('lib/layui-v2.6.3/css/layui.css')}}" media="all">
    <link rel="stylesheet" href="{{asset('css/public.css')}}" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div>
            <div class="layui-btn-group">
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
                <button class="layui-btn layui-btn-warm" id="btn-goods-cates-add" onclick="goodCateAdd(-1, 'add');">添加顶级分类</button>
            </div>
            <table id="munu-table-goods-cates-add" class="layui-table" lay-filter="munu-table-goods-cates-add"></table>
        </div>
    </div>
</div>
<!-- 操作列 -->
<script type="text/html" id="auth-state-goods-cates-add">

</script>
<!--add model-->
<div id="good-cate-add" style="display: none;">
    <form class="layui-form" id="good-cate-add-form" action="">
        <input type="hidden" name="parent_id" id="parent_id" value="-1">
        <input type="hidden" name="form-action" id="form-action">
        <input type="hidden" name="id" id="sortId">
        @csrf
        <br>
        <div class="layui-form-item">
                <label class="layui-form-label required">分类名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" id="name" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
        </div>
        <div class="layui-form-item">
                <label class="layui-form-label required">排序</label>
                <div class="layui-input-inline">
                    <input type="text" name="sort" id="sort" value="0" lay-verify="required" autocomplete="off" class="layui-input">
                </div>

            <div class="layui" style="text-align: center">
                <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="btn-submit-good-cate-form"><i class="layui-icon"></i> 保 存</button>
            </div>
        </div>
    </form>
</div>
<script src="{{asset('lib/layui-v2.6.3/layui.js')}}" charset="utf-8"></script>
<script src="{{asset('js/lay-config.js?v=1.0.4')}}" charset="utf-8"></script>
<script src="{{asset('lib/jquery-3.4.1/jquery-3.4.1.min.js')}}" charset="utf-8"></script>
<script>
    //添加、编辑分类
    function goodCateAdd(pid, type, data = null) {
        if (type === 'update') {
            $("#sortId").val(data.id);
            $("#sort").val(data.sort);
            $("#name").val(data.name);
            $("#form-action").val('/api/goods/cateUpdate');
        } else {
            $("#form-action").val('/api/goods/cateStore');
        }
        $("#parent_id").val(pid);
        layer.open({
            type:1,
            title: "添加、编辑分类",
            area: ['50%'],
            content: $('#good-cate-add'),
            cancel:function () {
                $("#good-cate-add-form")[0].reset();
                $("#good-cate-add").hide();
            }
        });
    }

    layui.use(['table', 'treetable', 'form'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;
        var form = layui.form;

        // 渲染表格
        layer.load(2);
        treetable.render({
            treeColIndex: 1,
            treeSpid: -1,
            treeIdName: 'id',
            treePidName: 'parent_id',
            elem: '#munu-table-goods-cates-add',
            url: '/api/goods/cateList',
            page: false,
            cols: [[
                {field: 'id', width: 80, title: '编号'},
                {field: 'name', title: '分类名称'},
                {field: 'sort', width: 80, align: 'center', title: '排序'},
                // {
                //     field: 'isMenu', width: 80, align: 'center', templet: function (d) {
                //         if (d.isMenu == 1) {
                //             return '<span class="layui-badge layui-bg-gray">按钮</span>';
                //         }
                //         if (d.parentId == -1) {
                //             return '<span class="layui-badge layui-bg-blue">目录</span>';
                //         } else {
                //             return '<span class="layui-badge-rim">菜单</span>';
                //         }
                //     }, title: '操作'
                // },
                {templet: function (d) {
                    if (d.parent_id == -1) {
                        return '<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add-goods-cates">添加子分类</a><a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit-goods-cates">修改</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del-goods-cates">删除</a>';
                    } else {
                        return '<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit-goods-cates">修改</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del-goods-cates">删除</a>';
                    }
                    }, width: 220, align: 'right', title: '操作'}
            ]],
            done: function () {
                layer.closeAll('loading');
            }
        });

        $('#btn-expand').click(function () {
            treetable.expandAll('#munu-table-goods-cates-add');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#munu-table-goods-cates-add');
        });

        //监听工具条
        table.on('tool(munu-table-goods-cates-add)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'del-goods-cates') {
                layer.msg('删除' + data.id);
            } else if (layEvent === 'edit-goods-cates') {
                goodCateAdd(data.id, 'update', data);
            } else if (layEvent === 'add-goods-cates') {
                goodCateAdd(data.id, 'add');
            }
        });
        //监听表单提交
        form.on('submit(btn-submit-good-cate-form)', function (data) {
            let ajaxUrl = $("#form-action").val();
            $.ajax({
                type: 'POST',
                url: ajaxUrl,
                dataType: 'json',
                data: data.field,
                success:function (res) {
                    if (res.code == 200) {
                        layer.closeAll();
                        parent.location.reload();
                        $("#good-cate-add").hide();
                    } else {
                        layer.open({
                            title: '出问题了'
                            ,content: '网络阻塞，请稍后再试'
                        });
                    }
                },
                //处理422
                error:function (err) {
                    if (err.status == 422) {
                        let json = JSON.parse(err.responseText);
                        json = json.errors;
                        let errorInfo = [];
                        for (let item in json) {
                            for (let i = 0; i < json[item].length; i++) {
                                errorInfo.push(json[item][i]);
                            }
                        }
                        let errStr = errorInfo.join('<br>');
                        layer.open({
                            title: '填写错误'
                            ,content: errStr
                        });
                    }
                    return false;
                },
            });
            return false;
        });
    });
</script>
</body>
</html>
